<template>
  <div>
    <router-view></router-view>
    <mu-paper style="max-width: 376px; position:fixed; left: 0; bottom:0;width:100%;">
      <mu-bottom-nav :value="bottomNav" shift @change="handleChange">
        <mu-bottom-nav-item value="movies" title="Movies" to="/" icon="ondemand_video" />
        <mu-bottom-nav-item value="music" title="Music" to="regi" icon="music_note" />
        <mu-bottom-nav-item value="edit" title="编辑" to="edit" icon="books" />
        <mu-bottom-nav-item value="profile" title="我的" to="profile" icon="photo" />
      </mu-bottom-nav>
    </mu-paper>
  </div>
</template>

<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      console.log(to.path)
      if(to.path !== '\/') {
          vm.bottomNav = to.path.substr(1);
          vm.bottomNavColor ==  to.path.substr(1);
      }else {
        vm.bottomNav = 'movies',
        vm.bottomNavColor ='movies'
      }
    })
  },
  data() {
    return {
      bottomNav: '',
      bottomNavColor: ''
    }
  },

  methods: {
    handleChange(val) {
      this.bottomNav = val
    }
  }
}
</script>